<template>
  <div class="app-container">
    <!-- <div class="filter-container">
      <el-input
        v-model="labelname"
        placeholder="名称"
        style="width: 100px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="success"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
      >
        新增标签
      </el-button>
    </div> -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="编号" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标签类型" class-name="status-col" width="90">
        <template slot-scope="{ row }">
          {{ row.labelName }}
        </template>
      </el-table-column>
      <el-table-column label="应用名称" min-width="150" align="center">
        <template slot-scope="{ row }">
          <el-tag
            v-for="item in row.loanApps"
            :key="item.id"
            :type="
              item.needPay === null
                ? 'primary'
                : item.needPay === 0
                ? 'success'
                : 'danger'
            "
            effect="plain"
            style="margin:1px"
          >
            {{ item.appName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="140"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="editLabel(row)">
            编辑
          </el-button>
          <!-- <el-button type="warning" size="mini" @click="sort(row)">
            排序
          </el-button> -->
          <!-- <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 排序 -->
    <!-- <el-dialog
      title="产品排序"
      :visible.sync="dialogVisible2"
      width="60%"
      :before-close="handleClose"
    >
      <template>
        <el-table :data="sortData" border style="width: 100%;">
          <el-table-column prop="appName" label="应用名称" align="center">
          </el-table-column>
          <el-table-column label="排序" min-width="80" align="center">
            <template slot-scope="{ row }">
              <el-input
                type="number"
                v-model="row.sort"
                style="text-align:center;"
              />
            </template>
          </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitSort()">确 定</el-button>
      </span>
    </el-dialog> -->

    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible1" width="90%">
      <el-form :model="form1" label-width="100px" label-position="left">
        <el-form-item label="标签类型">
          <el-input v-model="form1.labelName"></el-input>
        </el-form-item>
        <!-- <el-form-item label="应用名称">
          <el-select
            v-model="id"
            clearable
            placeholder="请选择应用名称"
            style="width: 200px;"
            class="filter-item"
            multiple
            @change="changeSelect"
          >
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :value="item.id"
              :label="item.appName"
            >
              {{ item.appName }}
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item
          v-for="(domain, ind) in dynamicValidateForm.domains"
          :label="'产品名称' + (ind+1)"
          :key="domain.key"
        >
        <el-select
            v-model="domain.value"
            clearable
            placeholder="请选择应用名称"
            style="width: 200px;"
            class="filter-item"
            @change="changeSelect"
          >
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :value="item.id"
              :label="item.appName"
            >
              {{ item.appName }}
            </el-option>
            </el-select>
            <el-button @click.prevent="removeDomain(domain)" style="margin-left:10px" v-show="ind!=0">删除</el-button>
          <el-button v-show="(ind+1) == dynamicValidateForm.domains.length" @click="addDomain" type="info">新增</el-button>
          
        </el-form-item>

        <el-form-item label="标签开关" v-if="form1.labelName == '推荐产品'">
          <el-switch
            v-model="form1.described"
            active-text="开"
            inactive-text="关"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="90%">
      <el-form :model="form">
        <!-- <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.id"></el-input>
        </el-form-item> -->
        <el-form-item label="标签名称" :label-width="formLabelWidth">
          <el-input v-model="form.labelName"></el-input>
        </el-form-item>
        <!-- <el-form-item label="应用名称" :label-width="formLabelWidth">
          <el-input v-model="form.described"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  findAll,
  add,
  findByName,
  list,
  ids,
  deleteById,
  findLoanAppByLabelId,
  updateSort,
} from "@/api/label";
import waves from "@/directive/waves";
import Pagination from "@/components/Pagination";

export default {
  name: "Channellist",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
       dynamicValidateForm: {
          domains: [{
            value: ''
          },{
            value: ''
          }],},
      id: [],
      labelname: "",
      loanAppLabelIds: "",
      sortData: [],
      value: "",
      loanAppId: [],
      selectArr: "",
      dialogFormVisible1: false,
      dialogVisible2: false,
      form1: {
        labelName: "",
        id: "",
        described: "",
      },
      //新增
      form: {
        id: "",
        labelName: "",
        described: "",
        id: "",
      },
      loanAppLabel: {},
      fromConfig: [],
      toConfig: [],
      copyConfig: {
        fromchannelId: "",
        tochannelId: "",
      },
      bindingsApp: false,
      testCopy: "",
      tableData: [],
      total: 0,
      apptotal: 0,
      channelId: null,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 999,
        labelName: "",
      },
      channelConf: [],
      dialogFormVisible: false,
      listLoading: false,
    };
  },
  created() {
    this.findAll(this.listQuery);
  },

  methods: {
     removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      },
    async findAll() {
      const res = await findAll(this.listQuery);
      this.tableData = res.data.data;
      this.total = res.data.data.length;
    },
    // findAll() {
    //   findAll().then((res) => {
    //     if (res.data.code == 200) {
    //       this.tableData = res.data.data;
    //       this.total = res.data.data.length;
    //       console.log(res.data.data.length);
    //     } else {
    //       this.$notify({
    //         title: "业务提示",
    //         message: res.data.msg,
    //         type: "fail",
    //         duration: 2000,
    //       });
    //     }
    //   });
    //   console.log(this.total);
    // },
    //获取下拉框数据
    changeSelect(changeVal) {
      this.loanAppId = this.id;
      // this.loanAppId = row;
      // console.log(this.loanAppId);
    },
    // 更改排序
    // submitSort() {
    //   let sortId = [];
    //   this.sortData.forEach((item) => {
    //     let z = {
    //       labelId: this.loanAppId,
    //       appId: item.id,
    //       sort: parseInt(item.sort),
    //     };
    //     sortId.push(z);
    //   });
    //   updateSort(JSON.parse(JSON.stringify(sortId))).then((res) => {
    //     if (res.data.code == 200) {
    //       this.dialogVisible2 = false;
    //       this.$notify({
    //         title: "业务提示",
    //         message: "添加成功",
    //         type: "success",
    //         duration: 2000,
    //       });
    //       this.findAll();
    //     } else {
    //       this.$notify({
    //         title: "业务提示",
    //         message: res.data.msg,
    //         type: "fail",
    //         duration: 2000,
    //       });
    //     }
    //   });
    // },
    // 排序
    // async sort(row) {
    //   this.loanAppId = row.id;
    //   const res = await findLoanAppByLabelId({ labelId: row.id });
    //   this.dialogVisible2 = true;
    //   if (res.data.code == 200) {
    //     this.sortData = res.data.data;
    //   } else {
    //     this.$notify({
    //       title: "Error",
    //       message: res.data.msg,
    //       type: "error",
    //       duration: 2000,
    //     });
    //   }
    // },
    // 删除
    handleDelete(row) {
      var that = this;
      this.$confirm("删除提示！", "确认删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        deleteById({ id: row.id }).then((res) => {
          if (res.data.code === 200) {
            that.findAll();
          } else {
            this.$notify({
              title: "错误",
              message: res.data.msg,
              type: "fail",
              duration: 2000,
            });
          }
        });
      });
    },
    //编辑
    async editLabel(row) {
      // this.loanAppId = [];
      // this.id = []; 
      // this.dynamicValidateForm.domains = [];
      // if (row.loanApps) {
      //   row.loanApps.forEach((item) => {
      //     this.loanAppId.push(item.id);
      //     this.id.push(item.id);
      //     this.dynamicValidateForm.domains.push({
      //       value: item.id
      //     })
      //   });
      // }else{
      //   this.dynamicValidateForm.domains = [{value: null}];
      // }
      // this.form1.described = row.described;
      // this.loanAppLabelIds = row.id;
      // this.form1.labelName = row.labelName;


      this.dialogFormVisible1 = true;
      const res = await findLoanAppByLabelId({ labelId: row.id });
      if(res.data.code == 200){
          this.loanAppId = [];
      this.id = []; 
      this.dynamicValidateForm.domains = [];
        this.sortData = res.data.data;
        if(this.sortData){
          this.sortData.forEach((item)=>{
            this.loanAppId.push(item.id);
            this.id.push(item.id)
            this.dynamicValidateForm.domains.push({
            value: item.id
          })
          })
        }else{
        this.dynamicValidateForm.domains = [{value:null}];
       }
      }
       this.form1.described = row.described;
      this.loanAppLabelIds = row.id;
      this.form1.labelName = row.labelName;
      let data = {
        appName: "",
        current: 0,
        productType: "",
        size: 999,
        state: 1,
      };
      list(data).then((res) => {
        if (res.data.code == 200) {
          this.selectArr = res.data.data.records;
        } else {
          this.$notify({
            title: "业务提示",
            message: res.data.msg,
            type: "fail",
            duration: 2000,
          });
        }
      });
    },
    //搜索
    handleFilter() {
      let loanAppLabelDto = {
        loanAppLabel: this.labelname,
      };
      findByName(loanAppLabelDto).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.data.length;
          // console.log(res);
          // console.log(this.total, res.data.data.length);
        } else {
          this.$notify({
            title: "业务提示",
            message: res.data.msg,
            type: "fail",
            duration: 2000,
          });
        }
      });
    },
    submit() {
      this.loanAppId = []
      let sortAndIdDto = [] 
      this.dynamicValidateForm.domains.forEach((item,index)=>{
        if(item.value){
          sortAndIdDto.push({loanAppId:item.value,sort:(index+1)})
        }
        // this.loanAppId.push(item.value)
      })
      let saveBatchDto = {
        // loanAppIds: this.loanAppId,
        loanAppLabelId: this.loanAppLabelIds,
        labelName: this.form1.labelName,
        described: this.form1.described,
        sortAndIdDto
      };
      ids(JSON.parse(JSON.stringify(saveBatchDto))).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.dialogFormVisible1 = false;
          this.$notify({
            title: "业务提示",
            message: "添加成功",
            type: "success",
            duration: 2000,
          });
          this.findAll();
        } else {
          this.$notify({
            title: "业务提示",
            message: res.data.msg,
            type: "fail",
            duration: 2000,
          });
        }
      });
    },
    // 添加
    // add() {
    //   this.$confirm("新增提示！", "确认新增吗？", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //   }).then(() => {
    //     this.loanAppLabel = this.form;
    //     add(this.loanAppLabel).then((res) => {
    //       // console.log(res);
    //       if (res.data.code == 200) {
    //         this.dialogFormVisible = false;
    //         this.$notify({
    //           title: "业务提示",
    //           message: "新增成功",
    //           type: "success",
    //           duration: 2000,
    //         });
    //         this.form.labelName = "";
    //         this.form.id = "";
    //         this.findAll();
    //       } else {
    //         this.$notify({
    //           title: "业务提示",
    //           message: res.data.msg,
    //           type: "fail",
    //           duration: 2000,
    //         });
    //       }
    //     });
    //   });
    // },
  },
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}
.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
